<template>
  <div class="prediction-chart">
    <h3>{{ title }}</h3>
    <div ref="chartContainer" class="chart-container"></div>
    <div class="confidence-slider">
      <label for="confidence">置信度: {{ confidence }}</label>
      <input
        type="range"
        id="confidence"
        v-model="confidence"
        min="0"
        max="100"
        step="1"
        @input="updateConfidence"
      />
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { useAITradeStore } from '@/store'
import * as echarts from 'echarts'

export default {
  name: 'PredictionChart',
  props: {
    stockCode: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: '价格走势预测'
    },
    predictionData: {
      type: Object,
      default: null
    }
  },
  setup(props, { emit }) {
    const store = useAITradeStore()
    const chartContainer = ref(null)
    const chart = ref(null)
    const confidence = ref(75)
    const predictionData = ref(null)

    const updateConfidence = () => {
      emit('update:confidence', confidence.value)
      store.updatePredictionConfidence(props.stockCode, confidence.value)
    }

    watch(() => props.predictionData, (newData) => {
      if (newData) {
        predictionData.value = newData
        confidence.value = Math.round(newData.confidence * 100)
        renderChart()
      }
    }, { immediate: true })

    const renderChart = () => {
      if (!chartContainer.value || !predictionData.value) return

      if (!chart.value) {
        chart.value = echarts.init(chartContainer.value)
      }

      // 假设我们只有一个预测值，没有历史数据和上下限
      const predictionDate = new Date(predictionData.value.prediction_date)
      const today = new Date()
      const dates = [today.toISOString().split('T')[0], predictionDate.toISOString().split('T')[0]]

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['预测价格']
        },
        xAxis: {
          type: 'category',
          data: dates
        },
        yAxis: {
          type: 'value',
          name: '价格',
          axisLabel: {
            formatter: '{value} ¥'
          }
        },
        series: [
          {
            name: '预测价格',
            type: 'line',
            data: [null, predictionData.value.prediction_value],
            color: '#2196F3'
          }
        ]
      }

      chart.value.setOption(option)
    }

    onMounted(() => {
      window.addEventListener('resize', () => chart.value && chart.value.resize())
    })

    return {
      chartContainer,
      confidence,
      updateConfidence
    }
  }
}
</script>

<style scoped>
.prediction-chart {
  background: var(--surface-background, #ffffff);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-container {
  height: 400px;
  width: 100%;
}

.confidence-slider {
  margin-top: 20px;
}

.confidence-slider label {
  display: block;
  margin-bottom: 10px;
}

.confidence-slider input {
  width: 100%;
}
</style>